/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import { Form, Input, Table, Button, Space } from 'antd';
import qs from 'qs';
import Cookies from 'js-cookie';
import { If } from 'babel-plugin-jsx-control-statements';
import { Link } from 'react-router-dom';
import RequestApi from '@/utils/request';
import css from './index.scss';

export default () => {
	const [form] = Form.useForm();
	const [data, setData] = useState();
	const manageOrgId = Cookies.get('manageOrgId');
	useEffect(() => {
		RequestApi.connection('get', `parkLot/getManage/${manageOrgId}`).then((response) => {
			setData(response.data.rows);
		});
	}, []);
	const onFinish = (values) => {
		RequestApi.connection('get', `/parkLot/getListByName/${values.name}`).then((response) => {
			setData(response.data.rows);
		});
	};
	const reset = () => {
		form.resetFields();
		RequestApi.connection('get', `parkLot/getManage/${manageOrgId}`).then((response) => {
			setData(response.data.rows);
		});
	};

	const columns = [
		{
			title: '功能列',
			dataIndex: 'name',
			width: 60,
			render: (text, record) => {
				return (
					<Space>
						<Link
							to={{
								pathname: `/parking-record/check`,
								search: qs.stringify({ id: record.id, value: 1, type: record.type, stage: record.stage }),
							}}
							replace
						>
							详情
						</Link>
					</Space>
				);
			},
		},
		{
			title: '备案管理状态',
			dataIndex: 'status',
			width: 120,
			render: (text) => {
				return (
					<>
						<If condition={text === 0}>
							<span>从未备案</span>
						</If>
						<If condition={text === 1}>
							<span>无需备案</span>
						</If>
						<If condition={text === 2}>
							<span>已注销</span>
						</If>
						<If condition={text === 3}>
							<span>已过期</span>
						</If>
						<If condition={text === 4}>
							<span>生效中</span>
						</If>
						<If condition={text === 5}>
							<span>审核中</span>
						</If>
					</>
				);
			},
		},
		{
			title: '停车场名称',
			dataIndex: 'name',
			ellipsis: true,
		},
		{
			title: '流水号',
			dataIndex: 'sno',
			width: 150,
			ellipsis: true,
		},
		{
			title: '备案号',
			dataIndex: 'recordNo',
			ellipsis: true,
		},
		{
			title: '停车场类型',
			dataIndex: 'parkLotType',
			width: 100,
			ellipsis: true,
			render: (text) => {
				return (
					<>
						<If condition={text === 1}>
							<span>配建</span>
						</If>
						<If condition={text === 2}>
							<span>公共</span>
						</If>
					</>
				);
			},
		},
		{
			title: '停车场等级',
			dataIndex: 'parkLevel',
			width: 100,
			ellipsis: true,
			render: (text) => {
				return (
					<>
						<If condition={text === 0}>
							<span>普通</span>
						</If>
						<If condition={text === 1}>
							<span>特级</span>
						</If>
					</>
				);
			},
		},
		{
			title: '停车场地址',
			ellipsis: true,
			dataIndex: 'address',
		},
		{
			title: '所属区域',
			width: 100,
			ellipsis: true,
			dataIndex: 'districtName',
		},
		{
			title: '车位数(个)',
			width: 100,
			ellipsis: true,
			dataIndex: 'parkCount',
		},
		{
			title: '产权单位',
			ellipsis: true,
			dataIndex: 'propertyOrgName',
		},
		{
			title: '管理单位',
			ellipsis: true,
			dataIndex: 'manageOrgName',
		},
	];

	return (
		<>
			<Form form={form} className={css.table_list_form} onFinish={onFinish}>
				<Space>
					<Form.Item name="name">
						<Input placeholder="停车场名称" style={{ width: 200 }} allowClear />
					</Form.Item>
					<div className={css.button}>
						<Button type="primary" htmlType="submit">
							查询
						</Button>
						<Button onClick={reset}>重置</Button>
					</div>
				</Space>
			</Form>
			<If condition={data !== null || data !== undefined}>
				<Table
					size="small"
					bordered
					columns={columns}
					scroll={{ x: 2000, y: 'calc(100vh - 290px)' }}
					dataSource={data}
				/>
			</If>
		</>
	);
};
